/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */
async function getData() {
    const result = await axios({ url: '/v1_0/channels' });
    const str = `<option value="" selected>请选择文章频道</option>` + result.data.data.channels.map(items =>
        `<option value="${items.id}" >${items.name}</option>`
    ).join('');
    document.querySelector('.form-select').innerHTML = str;
}
getData();

/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */
document.querySelector('#img').addEventListener('change', async (e) => {
    console.log(e.target.files[0]);
    let fd = new FormData();
    fd.append('image', e.target.files[0]);
    const res = await axios({ url: '/v1_0/upload', method: 'POST', data: fd, })
    document.querySelector('.rounded').classList.add('show');
    document.querySelector('.place').classList.add('hide');
    document.querySelector('.rounded').src = res.data.data.url;
})
//点击图片切换
document.querySelector('.rounded').addEventListener('click', e => {
    document.querySelector('#img').click()
})

/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
document.querySelector('.btn-primary').addEventListener('click', e => {
    if (document.querySelector('.btn-primary').innerHTML === '修改') {
        return;
    }
    let data = serialize(document.querySelector('.art-form'), { hash: true, empty: true });
    // let form = new FormData(document.querySelector('.art-form'));
    // let data = {};
    // form.forEach((v, k) => { data[k] = v });
    delete data.id;
    data.cover = {
        type: 1,
        images: [document.querySelector('.rounded').src]
    }

    console.log(data);
    axios({ url: '/v1_0/mp/articles', method: 'POST', data }).then(result => {
        myAlert(true, '上传成功');
        document.querySelector('.art-form').reset();
        document.querySelector('.rounded').classList.remove('show');
        document.querySelector('.place').classList.remove('hide');
        document.querySelector('.rounded').src = '';
        editor.setHtml('');
        setTimeout(() => { location.href = '../content/index.html' }, 1200)
    }).catch(err => {
        console.log(err);
        myAlert(false, err.response.data.message)
    })
});







/**
 * 目标4：编辑-回显文章
 *  4.1 页面跳转传参（URL 查询参数方式）
 *  4.2 发布文章页面接收参数判断（共用同一套表单）
 *  4.3 修改标题和按钮文字
 *  4.4 获取文章详情数据并回显表单
 */
(function () {
    // console.log(location.search);
    let url = new URLSearchParams(location.search);
    url.forEach(async (v, k) => {
        try {
            if (k === 'id') {
                document.querySelector('.title span').innerHTML = '修改文章';
                document.querySelector('.send').innerHTML = '修改';

                let result = await axios({ url: `/v1_0/mp/articles/${v}` });
                console.log(result);
                let data = {
                    channel_id: result.data.data.channel_id,
                    content: result.data.data.content,
                    cover: result.data.data.cover.images,
                    id: result.data.data.id,
                    title: result.data.data.title,
                }
                Object.keys(data).forEach(key => {
                    // console.log(key);
                    if (key === 'cover') {
                        if (data[key]) {
                            document.querySelector('.rounded').classList.add('show');
                            document.querySelector('.place').classList.add('hide');
                            document.querySelector('.rounded').src = data[key];
                        }
                    }
                    else if (key == 'content') {
                        editor.setHtml(data[key])
                    }
                    else if (key == 'channels_id') {
                        if (data[key]) {
                            document.querySelector(`[name=${key}]`).value = data[key];
                        }
                    }
                    else {

                        document.querySelector(`[name=${key}]`).value = data[key];

                    }
                })
            }
        } catch {
            console.log(err);
        }
    })

})();
/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */
document.querySelector('.btn-primary').addEventListener('click', () => {
    if (document.querySelector('.btn-primary').innerHTML === '发布') {
        return;
    }
    let form = new FormData(document.querySelector('.art-form'));
    let data = {};
    form.forEach((v, k) => { data[k] = v });
    // delete data.img
    // console.log(data);
    axios({
        url: `/v1_0/mp/articles/${data.id}`,
        method: 'PUT',
        data: {
            ...data,
            cover: {
                type: document.querySelector('.rounded').src ? 0 : 1,
                images: [document.querySelector('.rounded').src],
            }
        }
    }).then(result => {
        myAlert(true, '修改成功');
        setTimeout(() => { location.href = '../content/index.html' }, 1200)
    }).catch(err => {
        myAlert(false, err.response.data.message);
    })
})